import ProgressBar from '@/components/progress-bar';
import { Layout } from 'antd';
import { Helmet } from 'react-helmet-async';
import {
  type CSSProperties,
  Suspense,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { ThemeLayout } from '@/types/enum';
import { useSettings } from '@/store/settingStore';
import { CircleLoading } from '@/components/loading';
import { useResponsive } from '@/theme/hooks';
import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';

import { useScroll } from 'framer-motion';
import Nav from './nav';
import Main from './main';
import { Footer } from 'antd/es/layout/layout';

import useWindowWidth from '@/hooks/event/use-window-width';

export default function WorkLayouts() {
  const { themeLayout, themeMode } = useSettings();
  const { screenMap } = useResponsive();
  const { windowWidth, isPc } = useWindowWidth();

  const mainEl = useRef<HTMLDivElement>(null);
  const { scrollY } = useScroll({ container: mainEl });

  const secondLayoutStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    background: '#edeff7',
    transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    paddingLeft:
      isPc && screenMap.md
        ? themeLayout === ThemeLayout.Horizontal
          ? 0
          : themeLayout === ThemeLayout.Mini
          ? NAV_COLLAPSED_WIDTH
          : NAV_WIDTH
        : 0,
  };

  const layoutClassName = useMemo(() => {
    return `bg-[#edeff7] flex h-screen overflow-hidden ${
      themeLayout === ThemeLayout.Horizontal ? 'flex-col' : 'flex-row'
    }`;
  }, [themeLayout]);

  useEffect(() => {
    console.log('themeLayout', themeLayout);
  }, [themeLayout]);

  return (
    <>
      <ProgressBar />
      <Layout className={layoutClassName}>
        <Helmet>
          <title>天工睿核智能体</title>
          <link rel="icon" href="/favicon-eai.ico"></link>
        </Helmet>
        <Suspense fallback={<CircleLoading />}>
          <Layout style={secondLayoutStyle}>
            {(themeLayout === ThemeLayout.Vertical || themeLayout === ThemeLayout.Mini) && isPc && (
              <Nav />
            )}
            <Main ref={mainEl} offsetTop={false} />
            <Footer style={{ padding: '0px' }}>
              <div> {themeLayout === ThemeLayout.Horizontal && <Nav />}</div>
            </Footer>
          </Layout>
        </Suspense>
      </Layout>
    </>
  );
}
